<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Welcome to Car Rent Inc</title>
</h:head>
<ui:composition template="/client/templates/frame.xhtml">

	<ui:define name="page">

		<h:form>
			<rich:dataTable value="#{billsManageBean.bills}" var="item"
				iterationStatusVar="it" id="billTable" border="1" rows="10" styleClass="center">

				<f:facet name="header">
					<h:outputText value="Current bills" />
				</f:facet>

				<rich:column>
					<f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>

				<rich:column>
					<f:facet name="header">Car</f:facet>
					<h:outputText value="#{item.request.car.manufacturer}" />
					<h:outputText value="#{item.request.car.model}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Car Number</f:facet>
					<h:outputText value="#{item.request.car.number}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">beginDate</f:facet>
					<h:outputText value="#{item.request.beginDate}">
						<f:convertDateTime pattern="dd.MM.yyyy" />
					</h:outputText>
				</rich:column>
				<rich:column>
					<f:facet name="header">endDate</f:facet>
					<h:outputText value="#{item.request.endDate}">
						<f:convertDateTime pattern="dd.MM.yyyy" />
					</h:outputText>
				</rich:column>
				<rich:column>
					<f:facet name="header">Bill purpose</f:facet>
					<h:outputText value="#{item.billPurpose}" />
				</rich:column>

				<rich:column>
					<a4j:region>
						<a4j:commandButton value="pay"
							action="#{billsManageBean.initBill}" execute="@this"
							onclick="#{rich:component('payPane')}.show()">
						</a4j:commandButton>
					</a4j:region>

				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller page="#{billsManageBean.page}" />
				</f:facet>
			</rich:dataTable>

			<rich:popupPanel id="payPane" autosized="true">
            Are you sure you want to pay this bill?
            <a4j:commandButton value="Pay"
					action="#{billsManageBean.payBill}" render="billTable"
					execute="@this"
					oncomplete="#{rich:component('payPane')}.hide(); return false;" />
				<a4j:commandButton value="Cancel"
					onclick="#{rich:component('payPane')}.hide(); return false;" />
			</rich:popupPanel>

		</h:form>
	</ui:define>
</ui:composition>

</html>